<template>
  <div class="bg">
    <el-form ref="form" :inline="true" style="width: 94%;margin: 0 auto;" :model="form" label-width="90px">
      <div v-for="(item, index) in LSoptions" :key="index" class="inputBox">
        <el-form-item :label="item.label + ':'">
          <el-select v-model="form[item.porp]" clearable placeholder="请选择">
            <el-option v-for="it in item.options" :key="it.value" :label="it.label" :value="it.value" />
          </el-select>
        </el-form-item>
      </div>
      <div class="btnBox inputBox" style="text-align:right">
        <el-button style="width:80px;height: 32px;" type="" @click="resetData">重 置</el-button>
        <el-button style="width:80px;height: 32px;" type="primary" @click="search">筛 选</el-button>
      </div>
    </el-form>
    <div v-if="options.length > 3" class="searchG">
      <div @click="upDown">
        高级筛选 <i v-if="isDown" class="el-icon-arrow-down" /> <i v-else class="el-icon-arrow-up" />
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    options: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      form: {},
      LSoptions: [],
      isDown: true
    }
  },
  mounted() {
    // 默认收起
    if (this.options.length > 3) {
      this.LSoptions = [this.options[0], this.options[1], this.options[2]]
    } else {
      this.LSoptions = this.options
    }
  },
  methods: {
    search() {
      this.$emit('searchData', this.form)
    },
    resetData(e) {
      this.form = {}
      this.$emit('resetData', this.form)
    },
    upDown() {
      if (!this.isDown) {
        this.LSoptions = [this.options[0], this.options[1], this.options[2]]
      } else {
        this.LSoptions = this.options
      }
      this.$nextTick(() => {
        this.isDown = !this.isDown
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.bg {
  background: #FFF;
  // border-radius: 4px;
  padding: 36px 20px 10px;
  width: 100%;
  height: 100px;
  margin-bottom: 24px;
  .inputBox {
    width: 27%;
    height: 60px;
    float: left;
  }
  .btnBox {
    width: 18%;
    float: right;
    flex: 1;
  }

  .searchG {
    text-align: center;
    padding-bottom: 16px;
    font-size: 14px;
    color: #1890ff;

    >div {
      display: inline-block;
      cursor: pointer;
    }
  }
}
</style>
<style lang="scss">
  .inputBox{
    .el-select{
      width: 100%;
    }
    .el-form-item {
    display: flex;
    margin-right: 0px;
    margin-bottom: 16px;
    padding: 0 10px;

    .el-form-item__label {
      padding-right: 8px;
      color: #000;
    }

    .el-form-item__content {
      flex: 1;
    }

    .el-input__inner {
      padding: 0 8px;
    }
  }
  }
</style>
